<template>
    <div>
        <analysis-section title="战略规划">
            <contend-canvas v-bind="$attrs" ref="contendCanvas" @save="handleSave($event, 'contendCanvas')" />
            <strategy-canvas v-bind="$attrs" ref="strategyCanvas" @save="handleSave($event, 'strategyCanvas')" />
        </analysis-section>
    </div>
</template>

<script lang="ts">
import AnalysisSection from '@/views/productAnalysis/productDetail/components/AnalysisSection.vue';
import ContendCanvas from './components/ContendCanvas.vue';
import StrategyCanvas from './components/StrategyCanvas.vue';
import { defineComponent } from 'vue';
export default defineComponent({
    components: {
        AnalysisSection,
        ContendCanvas,
        StrategyCanvas
    },
    emits: ['success'],
    setup(_, { emit }) {
        const handleSave = (val, field: string) => {
            if (field === 'contendCanvas') {
                emit('success', {
                    query: {
                        contendCanvas: JSON.stringify(val)
                    }
                });
            } else {
                emit('success', {
                    query: {
                        strategyCanvas: JSON.stringify(val)
                    }
                });
            }
        };
        return {
            handleSave
        };
    }
});
</script>
<style scoped lang="less">
.title-icon {
    cursor: pointer;
}
</style>